<template>
    <div class="leftside">
      <ul class="menu">
          <li @click="selectMenuItem('个人信息')"><a href="#">个人信息</a></li>
          <li @click="selectMenuItem('假条申请')"><a href="#">假条申请</a></li>
          <li @click="selectMenuItem('假条管理')"><a href="#">假条管理</a></li>
          <li @click="selectMenuItem('薪资计算')"><a href="#">薪资计算</a></li>
          <li @click="selectMenuItem('上班安排')"><a href="#">上班安排</a></li>
          <li @click="selectMenuItem('公费报销')"><a href="#">公费报销</a></li>
      </ul>
    </div>

  </template>
  
  <script>
  export default  {
    name: 'SideBar',
    data() {
      return {
        menuitem :'',
      };
    },
    methods:{
      selectMenuItem(menuItem) {
        this.menuitem=menuItem;
        this.$emit('update:selected-menu-item', this.menuitem); // 向 Home 组件发送事件
      },
    }
  };
  </script>
  
  <style scoped>
  /* 侧边栏容器样式 */
  .leftside {
    width: 200px; /* 侧边栏的宽度 */
    height: 100vh; /* 高度占满视口 */
    background: linear-gradient(135deg, #8deeeb 0%, #ffffff 100%);
    color: #0482b9; /* 文字颜色 */
    font-weight: bold; /* 使字体变粗 */
    padding: 20px; /* 内边距 */
    box-shadow: 2px 0 5px rgba(0,0,0,0.2); /* 轻微的阴影效果 */
    position: fixed; /* 固定在页面的一侧 */
    left: 10px; /* 左侧对齐 */
    top: 10px;/* 上下对齐 */
    overflow-y: auto; /* 如果内容过多，允许垂直滚动 */
  }
  
  /* 菜单样式 */
  .menu {
    list-style: none; /* 移除列表项的默认标记 */
    padding: 0;
    margin: 0;
  }
  
  /* 列表项样式 */
  .menu li {
    margin-bottom: 10px; /* 列表项之间的间距 */
    transition: background-color 0.3s; /* 背景颜色变化的过渡效果 */
  }
  
  /* 链接样式 */
  .menu li a {
    display: block; /* 将链接设置为块级元素 */
    padding: 10px 15px; /* 内边距 */
    color: inherit; /* 链接颜色继承自父元素 */
    text-decoration: none; /* 移除下划线 */
    border-radius: 4px; /* 圆角 */
    transition: background-color 0.3s; /* 悬停时的背景颜色变化过渡效果 */
  }
  
  /* 链接悬停效果 */
  .menu li a:hover {
    background-color: #555; /* 鼠标悬停时的背景颜色 */
  }
  
  /* 可以添加一个.active类来表示当前激活的菜单项 */
  .menu li a.active {
    background-color: #0482b9; /* 激活状态的背景颜色 */
    color: #fff; /* 文字颜色 */
  }
  
  /* 响应式设计 */
  @media (max-width: 768px) {
    .leftside {
      width: 100%; /* 在小屏幕上全宽显示 */
      height: auto; /* 高度自动 */
      position: relative; /* 不再固定位置 */
    }
  }
  
  </style>